<template>
  <div class="like">
    <div class="e" @click="mymsg">
      <!-- <img :src="userlist.avatarUrl" alt="" /> -->
      <img :src="aa.imageUrl" alt="" />
      <!-- <img :src="aa.targetUrl.jpg" alt="" /> -->
      <div class="minemsgleft">
        <p class="w">
          {{ userlist.w }}
          <!-- <van-icon name="search" /> -->
        </p>
        <p>
          <span class="level">Lv:{{ aa.title }}</span>
          <span></span>
        </p>
      </div>
    </div>
    <div class="t">
      <p class="q">
        <van-icon name="wap-nav" />
      </p>
    </div>
    <div class="d">
      <van-icon class="x" name="like" />
      <p class="m">我喜欢的音乐</p>
      <p class="l">2首</p>
      <p class="n">
        <van-icon name="like-o" />
        心动模式
      </p>
    </div>
    <div class="yi">
      <ul>
        <li>
          <van-icon class="box" name="play-circle">
            <p>最近播放</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="font">
            <p>本地音乐</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="printer">
            <p>云盘服务</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="bookmark">
            <p>已购买项</p>
          </van-icon>
        </li>
      </ul>
      <ul>
        <li>
          <van-icon class="box" name="friends">
            <p>我的好友</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="star">
            <p>收藏点赞</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="live">
            <p>我的播客</p>
          </van-icon>
        </li>
        <li>
          <van-icon class="box" name="new">
            <p>音乐罐子</p>
          </van-icon>
        </li>
      </ul>
      <div class="bbc">
        <ul>
          <li>
            <p class="cc"><van-icon name="plus" /> 音乐应用</p>
          </li>
        </ul>
      </div>
    </div>
    <ul>
      <li class="a">创建歌单</li>
      <li class="a">收藏歌单</li>
    </ul>
  </div>
</template>

<script>
import { getToken } from "../../utils/auth";
import { getuserAPI } from "../../api/services/login";
export default {
  data() {
    return {
      toplist: [],
      mindlist: [],
      userlist: [],
      level: "",
      userid: "",
      aa: "",
      uid: 32953014,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //跳转个人信息
    mymsg() {
      this.$router.push("/personal");
    },
    //跳转歌单详情
    detail(id) {
      this.$router.push(`/listdetail/${id}`);
    },
    detail(id) {
      this.$router.push(`/songlistdetail/${id}`);
    },
    //获取登录状态
    async aaa() {
      const result = await getToken();
      if (result) {
        const res = await getuserAPI(this.uid);
        console.log(res);
        this.aa = res.profileVillageInfo;
        console.log(this.aa);
      }
      // console.log(result);
    },
    async loginstatus() {
      const result = await loginstatusAPI();
      console.log(result, "zfc");
      if (result.data.data.code === 200) {
        this.uid = result.data.data.profile.userId;
        console.log(222222);
        this.userdetail(this.uid);
      } else {
        alert("请登录");
      }
    },
    // 获取用户详情
    userdetail(uid) {
      axios
        .get("http://192.168.1.107:3000/user/detail", {
          params: {
            uid: uid,
          },
        })
        .then((res) => {
          console.log(res, "用户详情");
          if (res.status === 200) {
            console.log(11111);
            console.log(222);
            console.log(222, res.data.profile);
            this.userlist = res.data.profile;
            console.log(this.userlist);
            this.level = res.data.level;
          }
        });
    },
  },
  created() {
    this.aaa();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.like {
  position: relative;
  width: 100%;
  height: 700px;
  margin-top: 20px;
  background: #f7f7f7;
  /* overflow: hidden; */
}
.box {
  color: red;
  position: relative;
  width: 85px;
  font-size: 30px;
  margin-top: 40px;
  float: left;
}

.yi {
  position: relative;
  /* margin-left: 10px; */
  position: relative;
  /* background: red; */
  width: 95%;
  margin-top: 200px;
  height: 250px;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #f7f7f7;
  border-radius: 10px;
  background-color: #fff;
  min-height: 300px;
}
.e {
  /* margin-left: 10px; */
  position: absolute;
  top: -115px;
  width: 90%;
  height: 100px;
  background: #f7f7f7;
  border-radius: 30px;
}
p {
  position: absolute;
  top: 17px;
  left: 22px;
  display: table;
  font-size: 14px;
}
.bbc {
  position: relative;
  width: 100%;
  position: absolute;
  top: 167px;
  border-top: 2px solid red;
  height: 70px;
}
.cc {
  border-radius: 10px;
  position: absolute;
  top: -71px;
  left: 133px;
  font-size: 22px;
}
/* .v { */
/* font-size: 20px; */
/* margin-left: 130px; */
/* margin-top: 30px; */
/* font-weight: 5px; */
/* } */
.d {
  margin-left: 10px;
  position: absolute;
  top: 308px;
  width: 95%;
  height: 100px;
  background: #fff;
  border-radius: 30px;
}
.n {
  border: #fff solid 1px;
  border-radius: 10px;
  font-size: 15px;
  margin-left: 219px;
  margin-top: 18px;
  font-weight: 5px;
}
.n:hover {
  color: red;
}
.x {
  font-size: 40px;
  color: red;
  margin-top: 26px;
  margin-left: 10px;
}
.m {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 33px;
}
.l {
  margin-top: 33px;
  margin-left: 35px;
}
.a {
  margin-top: 137px;
  margin-left: 62px;
  font-weight: 5px;
  font-size: 20px;
  float: left;
}
.a:hover {
  text-decoration: underline;
  color: red;
}
.s {
  font-size: 25px;
  margin-top: 10px;
  margin-left: 20px;
}
.w {
  margin-left: 361px;
  margin-top: -200px;
  font-size: 30px;
}
.q {
  margin-left: -10px;
  margin-top: -200px;
  font-size: 30px;
}
.e {
  width: 89%;
  margin-top: 40px;
  padding: 0 15px;
  height: 45px;
  /* margin: 15px 0; */
  background: #f7f7f7;
  border-radius: 15px;
  display: flex;
  align-items: center;
}
.e img {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.minemsgleft {
  float: left;
}
.w {
  line-height: 25px;
  text-indent: 5px;
  font-size: 15px;
}
.minemsgleft span {
  text-align: center;
  line-height: 15px;
  float: left;
  width: 80px;
  height: 15px;
  border-radius: 15px;
  font-size: 12px;
  margin-left: 30px;
}
.level {
  background-color: black;
  color: white;
  margin: 0 5px;
}
</style>
